<template>
  <div class="rotaion">
    <el-row>
      <el-col :span="3">画面旋转</el-col>
      <el-col :span="5">
        <el-button class="margin" :loading="rotationLoading90" @click="pictureRotation(90)"
          >顺时针旋转90°</el-button
        >
      </el-col>
      <el-col :span="5">
        <el-button class="margin" :loading="rotationLoading" @click="pictureRotation(-90)"
          >逆时针旋转90°</el-button
        >
      </el-col>
      <el-col :span="5"
        ><el-button class="margin" :loading="rotationLoading180" @click="pictureRotation(180)"
          >旋转180°</el-button
        ></el-col
      >
      <el-col :span="5"
        ><el-button class="margin2" :loading="rotationLoading0" type="primary" @click="pictureRotation(0)"
          >画面复原</el-button
        ></el-col
      >
      <el-col :span="1"></el-col>
    </el-row>
  </div>
  <img :src="pegSrc" alt="" width="100%" height="400" />
</template>

<script setup>
import { ref } from "vue";
import { setVideoRotation } from "@/http/video";
const pegSrc = ref(
  import.meta.env.VITE_APP_BASE_API + `api/video/stream.mjpeg?timestamp=${Date.now()}`
);
const rotationLoading90 = ref(false)
const rotationLoading = ref(false)
const rotationLoading180 = ref(false)
const rotationLoading0 = ref(false)
const pictureRotation = (angle) => {
  switch(angle) {
    case 0 :
        rotationLoading0.value = true
        break;
        case 90:
          rotationLoading90.value = true
          break;
          case -90:
            rotationLoading.value = true;
            break;
            case 180 :
              rotationLoading0.value = true
              break;
  }
  let param = {
    angle: angle,
  };
  setVideoRotation(param).then((res) => {
    switch(angle) {
    case 0 :
        rotationLoading0.value = false
        break;
        case 90:
          rotationLoading90.value = false
          break;
          case -90:
            rotationLoading.value = false;
            break;
            case 180 :
              rotationLoading0.value = false
              break;
      }

  });
};
</script>
<style lang="scss" scoped>
.rotaion {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  margin-bottom: 10px;
  .margin {
    margin: 0 20px;
    color: #4f52bb;
  }
  .margin2 {
    margin: 0 20px;
  }
}
</style>
